<template>
  <div class="product">
    <product-params></product-params>
    <div class="session-box">
      <!-- 产品图区域 -->
      <div class="session session1">
        <img class="img-bg" src="/imgs/session1-bg.jpg" alt="" />
        <div class="content">
          <img src="/imgs/section1_1.png" alt="" />
          <img src="/imgs/section1_2.png" alt="" />
          <div class="price">
            <span> <sup>¥</sup>1999</span>
            <i>起 </i>
            <del><sup>¥ </sup>2999</del>
          </div>
        </div>
      </div>
      <div class="session session2">
        <img class="img-bg" src="/imgs/session2-bg.jpg" alt="" />
        <div class="content">
          <h3>敢想，敢创作。</h3>
          <p>
            <span>一举将众多旗舰机的本领，齐集到你手中。神奇的</span
            >50倍潜望式变焦 <span>，与小米10</span> <br />
            <span>一样的</span> 专业模式AMOLED 原色屏骁龙765G更是
            <span>能效过人</span> 。它是<br />
            5G 手机，<span>更是让 @设计师 @摄影师 @vlogger @所有年轻人，</span>
            <br />
            迸发创造力的创作利器。
          </p>
        </div>
      </div>
      <div class="session session3">
        <img class="img-bg" src="/imgs/session3-bg.png" alt="" />
        <img class="img-bg2" src="/imgs/session3.png" alt="" />
        <div class="content">
          <div class="title">
            <span>设计</span> <br />
            轻轻的青春版，<br />
            轻轻地来到你手中。
          </div>
          <div class="bd">
            轻薄的设计，设计起来并不轻松。为了追求更好的手感，我们重新定制了<br />
            屏幕、相机，并重新设计了散热架构，厚度一降再降，最终薄至
            7.88mm*，<br />
            轻至192g*。一款轻巧非凡的 5G 手机，由此登场。
          </div>
        </div>
      </div>

      <!-- 轮播图区域 -->
      <div class="session-swiper">
        <swiper ref="mySwiper" :options="swiperOptions">
          <swiper-slide
            ><img src="/imgs/product/gallery-2.png" alt=""
          /></swiper-slide>
          <swiper-slide
            ><img src="/imgs/product/gallery-3.png" alt=""
          /></swiper-slide>
          <swiper-slide
            ><img src="/imgs/product/gallery-4.png" alt=""
          /></swiper-slide>
          <swiper-slide
            ><img src="/imgs/product/gallery-5.jpg" alt=""
          /></swiper-slide>
          <swiper-slide
            ><img src="/imgs/product/gallery-6.jpg" alt=""
          /></swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
      <!-- 视频区域 -->
      <div class="session-video">
        <h2>60帧超慢动作摄影 <br />慢慢回味每一瞬间的精彩</h2>
        <p>
          后置960帧电影般超慢动作视频，将眨眼间的美妙展现得淋漓尽致！<br />
          更能AI 精准分析视频内容，15个场景智能匹配背景音效。
        </p>
        <video
          src="/imgs/product/video.mp4"
          controls="controls"
          poster="/imgs/product/gallery-1.png"
        ></video>
      </div>
    </div>
  </div>
</template>

<script>
import ProductParams from '../components/ProductParams'
// 轮播图插件按需导入
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'

export default {
  data () {
    return {
      swiperOptions: {
        slidesPerView: 'auto',
        pagination: {
          el: '.swiper-pagination'
        },
        autoplay: true,
        loop: true
      }
    }
  },
  components: {
    ProductParams,
    Swiper,
    SwiperSlide
  }
}
</script>

<style lang="scss" scoped>
.product {
  .session-box {
    // 产品图区域
    .session {
      position: relative;
      width: 100%;
      font-size: 0;
      img.img-bg {
        width: 100%;
      }
    }
    .session1 {
      .content {
        position: absolute;
        top: 226px;
        left: 196px;
        width: 409px;
        height: 155px;
        > img:first-of-type {
          width: 100%;
        }
        > img:last-of-type {
          width: 310px;
          margin-top: 18px;
          margin-left: 24px;
        }
        .price {
          width: 100%;
          text-align: center;
          font-size: 16px;
          color: #4858e7;
          letter-spacing: 1px;
          i {
            font-style: normal;
          }
          span {
            font-size: 34px;
            sup {
              font-size: 75%;
            }
          }
          del {
            sup {
              font-size: 75%;
            }
          }
        }
      }
    }
    .session2 {
      .content {
        position: absolute;
        top: 162px;
        left: 50%;
        transform: translateX(-50%);
        color: #333;
        text-align: center;
        h3 {
          font-size: 52px;
        }
        p {
          font-size: 16px;
          color: #000;
          font-weight: 500;
          line-height: 2;
          span {
            color: #898888;
          }
        }
      }
    }
    .session3 {
      .img-bg2 {
        position: absolute;
        top: 170px;
        left: 0;
        width: 100%;
      }
      .content {
        position: absolute;
        top: 155px;
        right: 0;
        width: 50%;
        .title {
          font-size: 50px;
          line-height: 62px;
          font-weight: 500;
          span {
            color: #80909d;
          }
        }
        .bd {
          margin-top: 22px;
          font-size: 16px;
          color: #7c7c7c;;
          font-weight: 500;
        }
      }
    }
    // 轮播图
    .session-swiper {
      margin: 36px auto 52px;
      height: 264px;
      .swiper-slide {
        width: 460px; /*设为固定值*/
        height: 261px;
        background-color: green;
        margin-right: 30px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    // 视频
    .session-video {
      padding: 82px 0;
      color: #fff;
      text-align: center;
      width: 100%;
      background-color: #000;
      > h2 {
        font-size: 60px;
        margin-bottom: 35px;
      }
      > p {
        font-size: 24px;
        margin-bottom: 58px;
      }
      video {
        width: 1000px;
        height: 536px;
        margin: auto;
        outline: none;
      }
    }
  }
}
</style>
